<script setup lang="ts">
import router from '@/router';
import auth from '@/utils/auth';
import instance from '@/utils/http';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

// 获取个人信息
const user = ref({})
// 发送请求
onMounted(async () => {
  try {
    const res = await instance.get('v1_0/user/profile');
    // console.log('res', res);
    user.value = res.data.data.name
    // user.value = res.data.data;
  } catch (error) {
    console.error('获取用户信息失败', error);
  }
});
// 退出登录
const onExit = () => {
  // 危险操作需要二次弹窗
  ElMessageBox.confirm('您确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 确认退出登录
    localStorage.removeItem('geek-client-vue3')
    auth.delToken()
    router.push('/login')
    ElMessage.success('退出成功');
  }).catch(() => {
  })

}
</script>
<template>
  <div>
  <!-- flex容器 -->
   <el-container class="my-layout">
    <!-- 侧边栏 -->
    <el-aside width="200px">
    <img width="100%" src="@/assets/images/logo.png" alt="">
    <el-menu
      background-color="#023"
      style="border-right:none"
      text-color="#fff"
      :default-active="$route.path"
      router
      class="el-menu-vertical-demo">
<!-- default-active="2"表示默认选中的菜单项index=1 -->
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
          <span>数据概览</span>
      </el-menu-item>
      <el-menu-item index="/article" >
        <i class="el-icon-document"></i>
         <template v-slot:title>
          <span>内容管理</span>
         </template>
      </el-menu-item>
      <el-menu-item index="/publish">
        <i class="el-icon-s-promotion"></i>
        <span>发布文章</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
     <el-container>
      <!-- 头部 -->
      <el-header>
     <span>{{user}}</span>
     <el-link @click="onExit()" icon="el-icon-unlock" :underline="false">退出</el-link>
     </el-header>
      <!-- 主体 -->
       <el-main>
        <!-- 子路由出口 -->
        <router-view></router-view>
       </el-main>
     </el-container>
   </el-container>
  </div>
  </template>
  <style scoped>
  .my-layout {
    /* 1vh:视口高度的1% 1vw:视口宽度的1% */
    height: 100vh;
  }
  .el-aside {
    background-color: #023;
  }
  .el-header {
    border-bottom: 1px solid #ddd;
    display: flex;
  /* 主轴 */
  justify-content: end;
  /* 交叉轴 */
  align-items: center;
  /* 每个元素间距 */
  gap: 10px;
  }
  </style>
